<template>
	<div class="">
		<div ref="amapRef" class="w-full h-full"></div>
	</div>
</template>

<script setup lang="ts">
import { useScript } from '/@/hooks/web/useScript';
import MapIcon from '/@/assets/images/site_0_1.png';

const A_MAP_URL = 'https://webapi.amap.com/maps?v=1.4.15&key=24a6afd6ab0b81c1bda89e736ff24c6f';
const amapRef = ref();
const { toPromise } = useScript({ src: A_MAP_URL });
const markerLsPos: Array<[number, number]> = [
	[104.604208, 31.51514],
	[105.604208, 32.51514],
	[106.404208, 31.51514],
	[107.604208, 31.51514],
	[108.504208, 32.61514],
	[108.704208, 32.71514],
];
let map: any;
let AMap: any;
async function initMap() {
	await toPromise();
	await nextTick();
	const wrapEl = unref(amapRef);
	if (!wrapEl) return;
	AMap = (window as any).AMap;
	map = new AMap.Map(wrapEl, {
		resizeEnable: true,
		center: [107.604208, 31.51514],
		zoom: 6,
		mapStyle: 'amap://styles/blue',
	});
	const markers: any = [];
	for (let i = 0; i < markerLsPos.length; i++) {
		const marker = getMarkers(markerLsPos[i], `监测点${i + 1}`);
		markers.push(marker);
	}
	nextTick(() => {
		map.setFitView(markers);
	});
}

function getMarkers(position: [number, number], content: string) {
	const icon = new AMap.Icon({
		size: new AMap.Size(40, 40),
		// 图标的取图地址
		image: MapIcon,
		// 图标所用图片大小
		imageSize: new AMap.Size(40, 40),
	});
	const marker = new AMap.Marker({
		clickable: true,
		icon: icon,
		position: position,
		label: {
			offset: new AMap.Pixel(18 - 6 * content.length, -22),
			content: content,
		},
	});
	marker.setMap(map);
	marker.on('click', function () {
		marker.setAnimation('AMAP_ANIMATION_BOUNCE');
		setTimeout(() => {
			marker.setAnimation(null);
		}, 5000);
	});
	return marker;
}

onMounted(() => {
	initMap();
});
</script>

<style lang="scss" scoped>
:deep(.amap-marker-label) {
	color: #000;
	background: #00e400;
	border: unset;
	border-radius: 4px;
}
:deep(.amap-logo) {
	display: none !important;
}
</style>
